<!--
	Visualising Xively Feeds with D3
	Prepared by Paul Cheek
	(c) 2013 LogMeIn, Inc.
-->

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Xia Zemin's Xively Feed Visualization Demo</title>

	<link type="text/css" rel="stylesheet" href="css/normalize.css" />
	<link type="text/css" rel="stylesheet" href="css/foundation.min.css" />
	<link type="text/css" rel="stylesheet" href="css/rickshaw.min.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" type="text/css" media="all" />

	<style type="text/css">
		body, html {
			max-width: 100%;
			min-height: 100%;
			overflow-x: hidden;
			background: #666 url(img/loading.gif) center center no-repeat;
		}

		.hidden {
			display: none;
		}

		#xivelyContent {
			background: #fff;
			box-shadow: inset 0px 0px 100px #f0f0f0;
		}

			.graphWrapper {
				-moz-box-shadow:inset 0px 0px 50px 25px #ffffff;
				-webkit-box-shadow:inset 0px 0px 50px 25px #ffffff;
				box-shadow:inset 0px 0px 50px 25px #ffffff;
				background-image: linear-gradient(bottom, rgb(255,255,255) 30%, rgb(245,245,245) 97%);
				background-image: -o-linear-gradient(bottom, rgb(255,255,255) 30%, rgb(245,245,245) 97%);
				background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 30%, rgb(245,245,245) 97%);
				background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 30%, rgb(245,245,245) 97%);
				background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 30%, rgb(245,245,245) 97%);
				background-image: -webkit-gradient(
					linear,
					left bottom,
					left top,
					color-stop(0.3, rgb(255,255,255)),
					color-stop(0.97, rgb(245,245,245))
				);
			}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	<script src="js/custom.modernizr.js"></script>
	<script src="js/xivelyjs-1.0.0.min.js"></script>
	<script src="js/d3.v2.js"></script>
	<script src="js/rickshaw.min.js"></script>

</head>
<body>

	<!-- Header -->
	<div style="background: #101C24;">
		<div class="row">
			<div class="large-12 columns">
				<h1 style="color: #FFF; text-shadow: 0px 1px 0px #000;">
					Visualizing Xively Feeds
				</h1>
			</div>
		</div>
	</div>
	<!-- Form -->
	<div id="form" style="background: #F0F0F0; border-bottom: 1px solid #CCC; padding: 25px; padding-bottom: 15px;">
		<div class="row">
			<div class="large-5 columns">
				<div class="row collapse">
					<div class="small-3 columns">
						<span class="prefix">API Key</span>
					</div>
					<div class="small-9 columns">
						<input type="text" placeholder="Valid Master API Key" id="apiKeyInput">
					</div>
				</div>
			</div>
			<div class="large-5 columns">
				<div class="row collapse">
					<div class="small-3 columns">
						<span class="prefix">Feed ID's</span>
					</div>
					<div class="small-9 columns">
						<input type="text" placeholder="Comma separated" id="feedsInput">
					</div>
				</div>
			</div>
			<div class="large-2 columns">
				<a id="setFeeds" href="#" data-reveal-id="secondModal" class="secondary button small expand">
					Visualize &raquo;
				</a>
			</div>
		</div>
	</div>
	<!-- Page Content -->
	<div id="xivelyContent" style="position: relative;">
		<a href="https://github.com/xively/channel-viz" class="hide-for-medium hide-for-small"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
		<div id="welcome">
			<div class="row">
				<div class="large-1 columns">&nbsp;</div>
				<div class="large-10 columns text-center">
					<br/><br/><br/><br/><br/><br/><br/>
					<h1 class="subheader" style="text-align: center;">Welcome to Xively!</h1>
					<p>This page is an example of just one of many ways you can visualise your data on Xively.<br/>It was created with open-source tools, and reads data from Xively with the Xively JavaScript library.</p>
					<p>Read the tutorial <i>(comming soon)</i> on how to make and customise your own.</p>
				</div>
				<div class="large-1 columns">&nbsp;</div>
			</div>
			<div class="row">
				<div class="large-12 columns">
					<br/><br/><br/><br/><hr/><br/><br/><br/><br/>
					<div class="row">
						<div class="large-4 columns">
							<div class="hero panel">
								<p style="font-size: 14px;">To use this page, enter a Master API Key from your Xively account, and a list of the Feeds that you would like to display, into the forms above. You can view multiple Feeds by separating them with a comma, and select individual channels with an exclamation mark.</p>
							</div>
						</div>
						<div class="large-8 columns">
							<h4 class="subheader">Examples</h4>
							<hr/>
							  <div style="width:600px;height:500px;background:red;border:1px solid;"> 
							  夏泽民更改的版本20160606
							  <div style="width:20%;height:20%;border:1px solid;">
城市：<div id="city"></div>
温度范围：<div id="TempRange"></div>
当前温度：<div id="Temp">test</div>
</div>
		
		<script type="text/javascript">
		function data(result)
		{
document.getElementById("Temp").innerHTML=result["result"]["temp_curr"];
				 document .getElementById('TempRange').innerHTML=result["result"]["temperature"];
      document .getElementById('city').innerHTML=result["result"]["citynm"];
			}
			</script>
			
	
			<div style="width:20%;height:20%;border:1px solid;">
城市：<div id="city1"></div>
温度范围：<div id="TempRange1"></div>
当前温度：<div id="Temp1">test</div>
</div>
		
		<script type="text/javascript">
		function data1(result)
		{
document.getElementById("Temp1").innerHTML=result["result"]["temp_curr"];
				 document .getElementById('TempRange1').innerHTML=result["result"]["temperature"];
      document .getElementById('city1').innerHTML=result["result"]["citynm"];
			}
			</script>
		
				<div style="width:20%;height:20%;border:1px solid;">
城市：<div id="city2"></div>
温度范围：<div id="TempRange2"></div>
当前温度：<div id="Temp2">test</div>
</div>
		
		<script type="text/javascript">
		function data2(result)
		{
document.getElementById("Temp2").innerHTML=result["result"]["temp_curr"];
				 document .getElementById('TempRange2').innerHTML=result["result"]["temperature"];
      document .getElementById('city2').innerHTML=result["result"]["citynm"];
			}
			
		</script>
		<script type="text/javascript" src="http://api.k780.com:88/?app=weather.today&weaid=101020100&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data"></script>
		

     <script type="text/javascript" src="http://api.k780.com:88/?app=weather.today&weaid=101010100&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data1"></script>
		
		
		<script type="text/javascript" src="http://api.k780.com:88/?app=weather.today&weaid=101200101&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data2"></script>
		<!------------------------------------------------------------------------->
		// Include after jQuery (required)  
<script src="http://d23cj0cdvyoxg0.cloudfront.net/xivelyjs-1.0.4.min.js"></script>
	<script type="text/javascript">		
						// Set your API key first  
xively.setKey( "Iw025lVtk1uHCb0xGPXptjHXbl9LWdOX8UDlmBlq2UuoaHBA" );  
// Get feed content  
xively.feed.get( "504", function( data ) {  
  console.log( data.title ); // Logs the feed title  
});  
// Get realtime updates on a datastream  
xively.datastream.subscribe( "61916", "sine60", function( event, data ) {  
  console.log( data.current_value ); // Logs value changes in realtime  
}); 



// Set current value on elements  
$('.datastream-value').xively('get', { feed: 61916, datastream: 'sine60' });  
// Set and update value in realtime  
$('.datastream-value').xively('live', { feed: 61916, datastream: 'sawtooth60' }); 
</script>							 
	<!------------------------------------------------------------------------->								 
							 
							  </div>
							<div class="row">
								<div class="large-4 columns">
									<strong style="text-transform: uppercase;">Multiple Feeds</strong>
								</div>
								<div class="large-8 columns">
									<pre><em>61916,61916</em></pre>
								</div>
							</div>
							<hr/>
							<div class="row">
								<div class="large-4 columns">
									<strong style="text-transform: uppercase;">Individual Channels</strong><br/>
									<small>separate with exclamation marks</small>
								</div>
								<div class="large-8 columns">
									<pre><em>61916!random5!random3600</em></pre><br/>
									<pre><em>61916!random5,61916!random3600</em></pre>
								</div>
							</div>
						</div>
					</div>
					<br/><br/><br/><br/><hr/><br/><br/><br/><br/>
				</div>
			</div>
			<div class="row">
				<div class="large-2 columns">&nbsp;</div>
				<div class="large-8 columns">
					<h5 class="subheader text-center">To begin visualizing data, enter your Xively Master API key above!</h5>
					<br/><br/><br/><br/><br/><br/><br/>
				</div>
				<div class="large-2 columns">&nbsp;</div>
			</div>
		</div>
		<div id="invalidApiKey" class="hidden">
			<div class="row">
				<div class="large-2 columns">&nbsp;</div>
				<div class="large-8 columns">
					<br/><br/><br/>
					<h1 class="subheader" style="text-align: center;">Uh oh!</h1>
					<h2 class="subheader" style="text-align: center;">Your API key is invalid!</h2>
					<p>Please try again or generate a new key on Xively. It is important to keep in mind that this API key must be a global API key in order to work in this example. Using an application-specific API key will cause this example to malfunction.</p>

					<a href="#" data-reveal-id="exampleModal" class="openStart radius secondary button expand">Ready When You Are...</a>
					<br/><br/><br/>
				</div>
				<div class="large-2 columns">&nbsp;</div>
			</div>
		</div>
		<div id="validApiKey" class="hidden">
			<div class="row">
				<div class="large-2 columns">&nbsp;</div>
				<div class="large-8 columns">
					<br/><br/><br/>
					<br/><br/><br/>
					<h1 class="subheader" style="text-align: center;">Connected to Xively!</h1>
					<h5 class="subheader text-center">To begin visualizing data, enter your Xively feed information above...</h5>
				</div>
				<div class="large-2 columns">&nbsp;</div>
			</div>
			<div class="row">
				<div class="large-12 columns">
					<br/><br/><br/><br/><hr/><br/><br/><br/><br/>
					<div class="row">
						<div class="large-4 columns">
							<div class="hero panel">
								<p style="font-size: 14px;">To use this page, enter a Master API Key from your Xively account, and a list of the Feeds that you would like to display, into the forms above. You can view multiple Feeds by separating them with a comma, and select individual channels with an exclamation mark.</p>
							</div>
						</div>
						<div class="large-8 columns">
							<h4 class="subheader">Examples</h4>
							<hr/>
							<div class="row">
								<div class="large-4 columns">
									<strong style="text-transform: uppercase;">Multiple Feeds</strong>
								</div>
								<div class="large-8 columns">
									<pre><em>61916,61916</em></pre>
								</div>
							</div>
							<hr/>
							<div class="row">
								<div class="large-4 columns">
									<strong style="text-transform: uppercase;">Individual Channels</strong><br/>
									<small>separate with exclamation marks</small>
								</div>
								<div class="large-8 columns">
									<pre><em>61916!random5!random3600</em></pre><br/>
									<pre><em>61916!random5,61916!random3600</em></pre>
								</div>
							</div>
						</div>
					</div>
					<br/><br/><br/><br/>
					<br/><br/><br/><br/>
					<br/><br/><br/><br/>
				</div>
			</div>
		</div>
		<div id="feeds">
			<div class="feed hidden" id="exampleFeedNotFound" style="line-height: 25px; padding-top: 25px;">
				<div class="row title">
					<div class="large-12 columns">
						<h2 class="subheader value">Loading Feed Data...</h2>

						<div class="alert alert-box no-info">
							Sorry, this feed could not be found.
						</div>
					</div>
				</div>
			</div>
			<div class="feed hidden" id="exampleFeed" style="line-height: 25px; padding-top: 25px;">
				<div class="row title">
					<div class="large-12 columns">
						<h2 class="subheader value">Loading Feed Data...</h2>
					</div>
				</div>
				<div class="row">
					<div class="large-7 columns">
						<h4 class="subheader">Meta</h4>
						<div class="row id">
							<div class="large-4 columns"><strong>ID</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row description">
							<div class="large-4 columns"><strong>Description</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row link">
							<div class="large-4 columns"><strong>Link</strong></div>
							<div class="large-8 columns value"><a href="#">View on Xively &raquo;</a></div>
						</div>
						<div class="row creator">
							<div class="large-4 columns"><strong>Creator</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row updated">
							<div class="large-4 columns"><strong>Updated</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row tags">
							<div class="large-4 columns"><strong>Tags</strong></div>
							<div class="large-8 columns value"></div>
						</div>
					</div>
					  <div style="width:600px;height:500px;background:red;border:1px solid;"> 
							  夏泽民更改的版本20160606
							  <div style="width:20%;height:20%;border:1px solid;">
城市：<div id="city"></div>
温度范围：<div id="TempRange"></div>
当前温度：<div id="Temp">test</div>
</div>
		
		<script type="text/javascript">
		function data(result)
		{
document.getElementById("Temp").innerHTML=result["result"]["temp_curr"];
				 document .getElementById('TempRange').innerHTML=result["result"]["temperature"];
      document .getElementById('city').innerHTML=result["result"]["citynm"];
			}
			</script>
			
	
			<div style="width:20%;height:20%;border:1px solid;">
城市：<div id="city1"></div>
温度范围：<div id="TempRange1"></div>
当前温度：<div id="Temp1">test</div>
</div>
		
		<script type="text/javascript">
		function data1(result)
		{
document.getElementById("Temp1").innerHTML=result["result"]["temp_curr"];
				 document .getElementById('TempRange1').innerHTML=result["result"]["temperature"];
      document .getElementById('city1').innerHTML=result["result"]["citynm"];
			}
			</script>
		
				<div style="width:20%;height:20%;border:1px solid;">
城市：<div id="city2"></div>
温度范围：<div id="TempRange2"></div>
当前温度：<div id="Temp2">test</div>
</div>
		
		<script type="text/javascript">
		function data2(result)
		{
document.getElementById("Temp2").innerHTML=result["result"]["temp_curr"];
				 document .getElementById('TempRange2').innerHTML=result["result"]["temperature"];
      document .getElementById('city2').innerHTML=result["result"]["citynm"];
			}
			
		</script>
		<script type="text/javascript" src="http://api.k780.com:88/?app=weather.today&weaid=101020100&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data"></script>
		

     <script type="text/javascript" src="http://api.k780.com:88/?app=weather.today&weaid=101010100&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data1"></script>
		
		
		<script type="text/javascript" src="http://api.k780.com:88/?app=weather.today&weaid=101200101&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=data2"></script>
		<!------------------------------------------------------------------------->
		// Include after jQuery (required)  
<script src="http://d23cj0cdvyoxg0.cloudfront.net/xivelyjs-1.0.4.min.js"></script>
	<script type="text/javascript">		
						// Set your API key first  
xively.setKey( "Iw025lVtk1uHCb0xGPXptjHXbl9LWdOX8UDlmBlq2UuoaHBA" );  
// Get feed content  
xively.feed.get( "504", function( data ) {  
  console.log( data.title ); // Logs the feed title  
});  
// Get realtime updates on a datastream  
xively.datastream.subscribe( "61916", "sine60", function( event, data ) {  
  console.log( data.current_value ); // Logs value changes in realtime  
}); 
// Set current value on elements  
$('.datastream-value').xively('get', { feed: 61916, datastream: 'sine60' });  
// Set and update value in realtime  
$('.datastream-value').xively('live', { feed: 61916, datastream: 'sawtooth60' }); 
</script>							 
	<!------------------------------------------------------------------------->								 
							 
							  </div>
							
					<div class="large-5 columns">
						<h4 class="subheader">Location</h4>
						<div class="alert alert-box hidden no-location">
							Sorry, no location information is available.
						</div>
						<div class="row location-name">
							<div class="large-4 columns"><strong>Name</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row latitude">
							<div class="large-4 columns"><strong>Latitude</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row longitude">
							<div class="large-4 columns"><strong>Longitude</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row elevation">
							<div class="large-4 columns"><strong>Elevation</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row disposition">
							<div class="large-4 columns"><strong>Disposition</strong></div>
							<div class="large-8 columns value"></div>
						</div>
						<div class="row map">
							<div class="large-4 columns"><strong>Map</strong></div>
							<div class="large-8 columns value"><a href="#">View on Google Maps &raquo;</a></div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="large-12 columns">
						<div class="button-group" style="float: right;">
							<a href="#" class="small button secondary duration-hour">6 Hrs</a>
							<a href="#" class="small button secondary duration-day">Day</a>
							<a href="#" class="small button secondary duration-week">Week</a>
							<a href="#" class="small button secondary duration-month">Month</a>
							<a href="#" class="small button secondary duration-90">90 Days</a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="large-12 columns">
						<div class="datastreams" style="padding-bottom: 15px;">
							<div class="datastream hidden">
								<hr/>
								<div class="row">
									<div class="large-9 columns datastream-name subheader" style="font-size: 24px;">
										Datastream Name
									</div>
									<div class="large-3 columns datastream-value subheader" style="font-size: 24px; text-align: right;">
										420
									</div>
								</div>
								<div class="row">
									<div class="large-12 columns">
										<div class="graphWrapper" style="margin-top: 15px; padding: 10px; text-align: center;">
											<div class="graph" style="width: 600px; margin: auto;"></div>
										</div>
										<div class="slider" style="width: 600px; height: 15px; margin: auto;"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<hr/>
				</div>
			</div>
		</div>
	</div>
    
	<!-- Footer -->
	<div style="background: #0D1B23;">
		<div style="padding: 15px;">
			<div class="row">
				<div class="large-8 columns" style="color: rgb(81, 98, 111); padding-top: 10px; padding-bottom: 10px;">
					<small>
						This page was created with open-source tools, and uses data from <a style="font-weight: bold; color: rgb(81, 98, 111);" href="https://xively.com">Xively</a>. Read the <a style="font-weight: bold; color: rgb(81, 98, 111);" href="#">Tutorial (coming soon)</a> on how to make your own.
					</small>
				</div>
				<div class="large-4 columns" style="color: rgb(81, 98, 111); padding-top: 10px; padding-bottom: 10px;">
					<small>
						<a style="color: rgb(81, 98, 111);" href="https://github.com/xively/channel-viz/blob/master/LICENSE.md">This library is Open Source, under the BSD 3-Clause license.</a>
					</small>
				</div>
			</div>
		</div>
	</div>

	<!-- Modals -->
	<div id="loadingData" class="reveal-modal small text-center">
		<br/><br/><h2 class="subheader">Loading...</h2><br/><br/>
	</div>

	<script>
		document.write('<script src=' +
		('__proto__' in {} ? 'js/zepto' : 'js/jquery') +
		'.js><\/script>')
	</script>

	<script src="js/foundation.min.js"></script>
	<script src="follows.js"></script>
<div> 夏泽民更改的版本20160603</div><br/>
<div> 参考文献：https://personal.xively.com/dev/tutorials/channel-viz/</div>
</body>
</html>
